<!-- 云诺 https://app.witframe.com/market/list/index?uid=24 -->
<template>
	<view class="list">
		<view class="item" v-for="(item,index) in lists" :key="index">
			<view @tap="gotoDetail(type, item._id)" class="list-1" v-if="style == '1'">
				<view class="title">
					{{item.tName}}
				</view>
				<view class="desc">
					{{item.tDesc}}
				</view>
				<view class="info">
					<view class="left">
						<uni-dateformat class="info-date" :date="item.wUpdateTime * 1000" format="yyyy-MM-dd hh:mm"></uni-dateformat>
					</view>
					<view class="right">
						<text>浏览量：{{item.iViews}}</text>
					</view>
				</view>
				<view class="photo">
					<image :src="item.tPhoto" mode="aspectFill"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name:"yn-list",
		props: {
			lists: {
				type: Array,
				default: function() {
					return [];
				}
			},
			type: {
				type: String,
				default: function() {
					return 'news';
				}
			},
			style: {
				type: Number,
				default: function() {
					return 1;
				}
			},
		},
		data() {
			return {
			
			};
		},
		methods: {
			gotoDetail: function(type, id) {
				//console.log(type);
				//console.log(id);
				let detailPath = '/pages/news/detail?id=';
				switch(type){
					case 'news': detailPath = '/pages/news/detail?id=';break;
					case 'product': detailPath = '/pages/product/detail?id=';break;
					case 'case': detailPath = '/pages/case/detail?id=';break;
					case 'notice': detailPath = '/pages/notice/detail?id=';break;
					default:detailPath = '/pages/news/detail?id=';break;
				}
				uni.navigateTo({
					url: detailPath + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding-bottom: 60rpx;

		.item {
			padding: 0 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.list-1 {
				display: block;
				box-sizing: content-box;
				padding-top: 40rpx;
				padding-right: 220rpx;
				min-height: 220rpx;
				position: relative;

				.title {
					padding-top: 0rpx;
					padding-bottom: 8rpx;
					line-height: 50rpx;
					font-size: 34rpx;
					font-weight: bold;
					min-height: 50rpx;
					color: #494949;
					white-space: normal;
					word-break: normal;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-ms-hyphens: auto;
					hyphens: auto;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.desc {
					padding: 5rpx 20rpx 5rpx 5rpx;
					line-height: 40rpx;
					min-height: 80rpx;
					font-size: 22rpx;
					color: #000000;
				}
				
				.info {
					margin-top: 30rpx;
					height: 38rpx;
					display: flex;
					justify-content: space-between;

					.info-date{
						display: inline-block;
						vertical-align: top;
						height: 32rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						color: #969696;
						margin-right: 20rpx;
					}
					text {
						display: inline-block;
						vertical-align: top;
						height: 32rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						color: #969696;
						margin-right: 20rpx;
					}
				}

				.photo {
					position: absolute;
					width: 200rpx;
					height: 200rpx;
					right: 0;
					top: 46rpx;
					-o-object-fit: photo;
					object-fit: photo;


					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 4px;
					}
				}
			}

		}
	}
</style>
